import React, { Component } from "react";
import "../assets/css/Home.css";
import tempImg from "../assets/img/01.png";
import brand from "../assets/img/brand.png";
import coupon100 from "../assets/img/coupon100.png";
import coupon50 from "../assets/img/coupon50.png";
import hot from "../assets/img/hot.png";
import address from "../assets/img/icon_location.png";
import integral from "../assets/img/integral.png";
import seckill from "../assets/img/seckill.png";
import selfsupport from "../assets/img/selfsupport.png";
import slice from "../assets/img/slice.png";
import u_store from "../assets/img/u_store.png";
import { cartadd, getindexgoods, getnew, getseckill } from '../utils/api.js';

export default class home extends Component {
    constructor() {
        super()
        this.state = {
            newList: [],
            seckillList: [],
            goodsList: [],
        }
    }
    async componentDidMount() {
        let newRes = await getnew()
        let seckillRes = await getseckill()
        let goodsRes = await getindexgoods()
        
        if (newRes.code == 200 && seckillRes.code == 200 && goodsRes.code == 200) {
            this.setState({
                ...this.state,
                newList:newRes.list,
                seckillList:seckillRes.list,
                goodsList:goodsRes.list,
            })
        };
    }
    async joinCart(id) {
        let res = await cartadd({uid:this.uid,type:1,goodsid:id,num:1})
        alert(res.msg)
    }
    render() {
        let { newList, seckillList, goodsList } = this.state;
        console.log(goodsList);
        return (
            <div>
                <div className="indexTop">
                    <img className="u_store" src={u_store} />
                    <div className="searchBtn">
                        <i className="iconfont icon-sousuo searchIcon"></i>
                        <input type="text" placeholder="搜索商品" />
                        <button className="toSearch">搜索</button>
                    </div>
                    <img src={address} />
                </div>
                <div className="container">
                    <article className="new">
                        <div className="newUser">
                            <p>新人专享</p>
                            <div>
                                <span>05</span> : <span>42</span> :{" "}
                                <span>35</span>
                            </div>
                            <div className="showAll">
                                {" "}
                                查看全部
                                <img src={slice} alt="" />
                            </div>
                        </div>
                        <div className="gift  ">
                            <div className="giftTop">
                                <div>1重礼</div>
                                <p>
                                    信任特价商品专区
                                    <span>（限量供应，先到先得）</span>
                                </p>
                            </div>
                            <ul>
                                {
                                    newList.map(item =>
                                        <li key={item.id}>
                                            <img src={this.url + item.img} alt={item.goodsname} />
                                            <div className="giftBot">
                                                <div className="botLeft">
                                                    <p>
                                                        <i>￥</i>{item.price}
                                                    </p>
                                                    <p className="del">
                                                        <del>￥</del>{item.market_price}
                                                    </p>
                                                </div>
                                                <img src={address} alt="购买" />
                                            </div>
                                        </li>
                                    )
                                }
                            </ul>
                        </div>
                        <div className="gift second">
                            <div className="giftTop">
                                <div>2重礼</div>
                                <p>
                                    新人通用50元礼券
                                    <span>（下单立省，省了又省）</span>
                                </p>
                            </div>
                            <img className="coupon50" src={coupon50} alt="" />
                            <img className="coupon100" src={coupon100} alt="" />
                        </div>
                    </article>
                    <ul className="con-nav">
                        <li>
                            <a href="#">
                                <img src={seckill} alt="限时秒杀" />
                            </a>
                            <span>限时秒杀</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src={hot} alt="畅销商品" />
                            </a>
                            <span>畅销商品</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src={brand} alt="品质大牌" />
                            </a>
                            <span>品质大牌</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src={selfsupport} alt="小U自营" />
                            </a>
                            <span>小U自营</span>
                        </li>
                        <li>
                            <a href="#">
                                <img src={integral} alt="积分商城" />
                            </a>
                            <span>积分商城</span>
                        </li>
                    </ul>
                    <div className="gift seckill">
                        <div className="newUser">
                            <p>超级秒杀</p>
                            <div>
                                <span>05</span> : <span>42</span> :{" "}
                                <span>35</span>
                            </div>
                            <div className="showAll"></div>
                        </div>
                        <section>
                            <img src={hot} alt="" />
                            <div className="right">
                                <span>7.9折</span>
                                <p>溪牧原山茶花洁面乳精选太行山最优质……</p>
                                <div className="percentage">
                                    <div className="hundred">
                                        {" "}
                                        <b>30%</b>{" "}
                                    </div>
                                    <div
                                        className="residue"
                                        style={{ width: `calc(0.3 * 1.68rem)` }}
                                    ></div>
                                    <i>每人限购 1 件</i>
                                </div>
                                <div className="shop">
                                    <p>
                                        <i>￥</i>29.99
                                    </p>
                                    <del>69.9</del>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div className="gift   timing">
                        <div className="giftTop">
                            <div className="timingSeckill">限时秒杀</div>
                            <p>
                                信任特价商品专区
                                <span>（限量供应，先到先得）</span>
                            </p>
                        </div>
                        <ul>
                            {
                                seckillList.map(item =>
                                    <li key={item.id}>
                                        <img src={this.url + item.img} alt={item.goodsname} />
                                        <div className="giftBot">
                                            <div className="botLeft">
                                                <p>
                                                    <i>￥</i>{item.price}
                                                </p>
                                                <p className="del">
                                                    <del>￥</del>{item.market_price}
                                                </p>
                                            </div>
                                            <img src={address} alt="购买" />
                                        </div>
                                    </li>
                                )
                            }
                        </ul>
                    </div>
                    <article className="con-bot">
                        <section>
                            <h5>双11尖货预约</h5>
                            <p>畅购全球</p>
                        </section>
                        <ul>
                            <li>
                                <img src={tempImg} alt="商品1" />
                            </li>
                            <li>
                                <img src={tempImg} alt="商品2" />
                            </li>
                            <li>
                                <img src={tempImg} alt="商品3" />
                            </li>
                            <li>
                                <img src={tempImg} alt="商品4" />
                            </li>
                        </ul>
                    </article>
                    <article className="navChose">
                        <ul>
                            <li className="active">综合推荐</li>
                            <li>销量</li>
                            <li>价格</li>
                            <li>好评度</li>
                            <li>店铺</li>
                            <li className="sort">
                                <i className=" iconfont icon-santiaogang1"></i>
                                分类
                            </li>
                        </ul>
                    </article>
                    <article className="con-goods">
                    {/* <ul className="goods">
                            <li>
                                <img src={tempImg} alt="" />
                            </li>
                            <li>
                                <p>title</p>
                                <p>现价格: 2222</p>
                                <p>原价格: 1231</p>
                                <button className="active">立即抢购</button>
                            </li>
                        </ul> */}
                        {
                            goodsList.map(item =>
                                // 双重循环，嵌套一层
                                item.content.map(item =>
                                    <ul className="goods"  key={item.goodsname}>
                                        <li>
                                            <img src={this.url + item.img} alt="" />
                                        </li>
                                        <li>
                                            {/* <p>{{item.goodsname}}</p>
                                            <p>现价格: ￥{{item.market_price}}</p>
                                            <p>原价格: ￥{{item.price}}</p> */}
                                            <p>{item.goodsname}</p>
                                            <p>现价格: ￥{item.price}</p>
                                            <p>原价格: ￥{item.market_price}</p>
                                            <button className="active" onClick={()=>this.joinCart(item.id)}>立即抢购</button>
                                            <p>{ item.description }</p>
                                        </li>
                                    </ul>
                                )
                            )
                        }
                    </article>
                </div>
            </div>
        );
    }
}
